<template>
<div class="app-container">
  <el-form ref="form" :model="form" label-width="120px">
    <el-row :gutter="20">
      <!-- 商家名称 -->
      <el-col :span="20" class="dashed-divider">
        <el-form-item label="商家名称:" prop="sellerName"  width="50px">
          <!-- <el-input v-model="form.sellerName" placeholder="请输入商家名称"/> -->
          <span> {{form.sellerName}} </span>
        </el-form-item>
      </el-col> 

      <!-- 门店是否自提点（带说明文字） -->
      <el-col :span="20" class="form-item-with-desc dashed-divider">
        <el-form-item label="门店是否自提点:" prop="hasStore" class="inline-desc-item">
          <el-radio-group v-model="form.storePickup">
            <el-radio :label="'1'">否</el-radio>
            <el-radio :label="'2'">是</el-radio>
          </el-radio-group>
          <span class="form-item-description">
            说明：如果门店是自提点，则下单后即可提货；如果门店不是自提点，下单后需要先送货到自提点，会员方可到自提点提货。
          </span>
        </el-form-item>
      </el-col>

      <!-- 其他表单项（保持原样） -->
      <el-col :span="20" class="dashed-divider">
        <el-form-item label="购物赠送积分:" prop="rewardPoints">
          <el-radio-group v-model="form.rewardPoints">
            <el-radio :label="'1'">否</el-radio>
            <el-radio :label="'2'">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="20" class="dashed-divider">
        <el-form-item label="商品免审核:" prop="produceNoReview">
          <el-radio-group v-model="form.produceNoReview">
            <el-radio :label="'1'">否</el-radio>
            <el-radio :label="'2'">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="20" class="dashed-divider">
        <el-form-item label="活动免审核:" prop="activityNoReview">
          <el-radio-group v-model="form.activityNoReview">
            <el-radio :label="'1'">否</el-radio>
            <el-radio :label="'2'">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="20" class="dashed-divider">
        <el-form-item label="平台抽成比例:" prop="platformRate">
          <el-input-number v-model="form.platformRate" :min="0" :max="100" controls-position="right" />
          <span class="form-item-description">
            % 平台按商家销售额百分比抽成
          </span>
        </el-form-item>
      </el-col>

      <el-col :span="20" class="dashed-divider">
        <el-form-item label="会员查询权限:" prop="memberQueryPermission">
          <el-radio-group v-model="form.memberQueryPermission">
            <el-radio :label="'1'">全部会员</el-radio>
            <el-radio :label="'2'">消费会员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="20" class="dashed-divider">
        <el-form-item label="库存管理:" prop="inventory">
          <el-radio-group v-model="form.inventory">
            <el-radio :label="'1'">统一管理</el-radio>
            <el-radio :label="'2'">按门店管理</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="20" class="dashed-divider">
        <el-form-item label="资金结算:" prop="fundSettlement">
          <el-radio-group v-model="form.fundSettlement">
            <el-radio :label="'1'">结算给商家</el-radio>
            <el-radio :label="'2'">结算给门店</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <div class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</div>
</template>

<script>
import { getConfig, delConfig, addOrEditConfig } from "@/api/seller"

export default {
  name: "Config",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商家配置表格数据
      configList: [],

      // 表单参数
      form: {

        sellerName: ""
      },
      // 表单校验
      // rules: {
      //   sellerId: [
      //     { required: true, message: "商家ID不能为空", trigger: "blur" }
      //   ],
      // }
    }
  },
  created() {
    this.form.sellerId = this.$route.query.sellerId;
    console.log(this.$route.query);
    this.getData(this.form.sellerId);
  },

  methods: {
    getData(sellerId) {
      getConfig(sellerId).then(response => {
        this.form = response.data
        this.form.sellerName = this.$route.query.sellerName || response.data.sellerName
        this.form.sellerId = sellerId
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
      history.back();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sellerId: null,
        sellerName: null,
        hasStore: null,
        deliverer: null,
        deliveryType: null,
        shipper: null,
        rewardPoints: null,
        produceNoReview: null,
        activityNoReview: null,
        platformRate: null,
        memberQueryPermission: null,
        fundSettlement: null,
        inventory: null,
        storePickup: null
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getConfig(id).then(response => {
        this.form = response.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            addOrEditConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
            })
        }
      })
    },

  }
}
</script>
<style scoped>
/* 说明文字不换行，紧跟在单选框后面 */
.form-item-with-desc .el-form-item__content {
  display: flex;
  align-items: center;
}

.form-item-description {
  margin-left: 10px;
  font-size: 12px;
  color: #999;
  white-space: nowrap; /* 禁止换行 */
}

/* 每行虚线分割 */
.dashed-divider {
  border-bottom: 1px dashed #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

/* 最后一个元素不需要虚线 */
.el-col:last-child.dashed-divider {
  border-bottom: none;
  padding-bottom: 0;
}

/* 调整单选框组间距 */
.el-radio-group {
  margin-right: 10px;
}

/* 按钮居中（可选） */
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
</style>